<template>
  <div class="hellos">
    <span class="mui-icon mui-icon-search"></span>
    <a href="#">
      <span class="mui-icon-extra mui-icon-extra-sweep"></span>
    </a>
    <input type="text" placeholder="垃圾分类" />
    <a href="#">
      <img
        class="download"
        src="http://127.0.0.1/homework/my-ying/img/icon/xiazai.png"
        alt="图片加载失败"
      />
    </a>
  </div>
</template>

<script>
export default {};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
html,
body {
  font-size: 26.67vh;
}
.hellos {
  height: 3rem;
  position: relative;
  color: rgb(107, 106, 105);
  .mui-icon-search {
    position: absolute;
    z-index: 3;
    left: 1.5rem;
    top: 0.6rem;
  }
  .mui-icon-extra-sweep {
    position: absolute;
    z-index: 3;
    right: 3.5rem;
    top: 0.8rem;
    font-size: 1.3rem;
  }
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: rgb(206, 25, 212);
    font-size: 16px;
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: rgb(43, 93, 122);
    font-size: 16px;
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    color: rgb(148, 65, 123);
    font-size: 16px;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: rgb(194, 223, 35);
    font-size: 16px;
  }
  input {
    width: 18.9rem;
    height: 1.9rem;
    position: absolute;
    left: 1.2rem;
    padding-left: 1.8rem;
    top: 0.5rem;
    color: blueviolet;

    background-color: rgba(107, 106, 105, 0.171);
  }
  .download {
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    right: 0.5rem;
    top: 0.8rem;
  }
}
</style>

